import CommonDrawer from '@/components/CommonDrawer';
import TableTransfer from '@/components/TableTransfer';
import { TRIP_STATE_MAP } from '@/constants/enums';
import request from '@/utils/request';
import { useRequest } from 'ahooks';
import { Form } from 'antd';
import { useEffect } from 'react';

const Suggest = (props) => {
  const { baseForm, open, onCancel, onOk } = props;
  const [form] = Form.useForm();

  const { data, runAsync, mutate } = useRequest(
    async (params) => {
      const res = await request({
        url: '/operating/suggest/vehicle/task/list',
        method: 'GET',
        params,
      });
      return res.map((item) => ({
        ...item,
        key: item.vehicleId,
      }));
    },
    {
      manual: true,
    },
  );

  useEffect(() => {
    if (open) {
      const lineId = baseForm.getFieldValue('lineId');
      const planDate = baseForm.getFieldValue('planDate');
      const trips = baseForm.getFieldValue('trips');
      runAsync({
        lineId,
        day: planDate?.format?.('YYYY-MM-DD'),
        size: trips,
      });
    }
  }, [open, runAsync]);

  const handleOk = () => {
    const values = form.getFieldsValue();
    const valueList = data?.filter((item) =>
      values?.list?.includes?.(item.vehicleId),
    );
    onOk?.(valueList);
  };
  const columns = [
    {
      title: '序号',
      width: 65,
      fixed: 'left',
      render: (text, record, index) => index + 1,
    },
    {
      title: '组织',
      dataIndex: 'groupName',
      width: 220,
    },
    {
      title: '车牌号',
      dataIndex: 'license',
      width: 120,
    },
    {
      title: '驾驶员',
      dataIndex: 'realname',
      width: 140,
    },
    {
      title: '已排班线路',
      dataIndex: 'planLineName',
      width: 140,
    },
    {
      title: '运营线路',
      dataIndex: 'lineName',
      width: 280,
    },
    {
      title: '运营状态',
      dataIndex: 'state',
      width: 140,
      render: (text) => TRIP_STATE_MAP[text],
    },
    {
      title: '距装货地距离（km）',
      dataIndex: 'distance',
      width: 140,
    },
    {
      title: '月拉运线路趟次',
      dataIndex: 'tripLineTotal',
      width: 140,
    },
    {
      title: '月拉运总趟次',
      dataIndex: 'tripTotal',
      width: 140,
    },
    {
      title: '司机评分',
      dataIndex: 'driverScore',
      width: 140,
    },
  ];
  return (
    <CommonDrawer
      title="排版推荐"
      width="100%"
      open={open}
      onClose={onCancel}
      onOk={handleOk}
      afterOpenChange={(visible) => {
        if (!visible) {
          form.resetFields();
          mutate();
        }
      }}
      destroyOnHidden
    >
      <div>
        <Form form={form} layout="horizontal">
          <Form.Item noStyle name="list">
            <TableTransfer
              rowKey="vehicleId"
              dataSource={data}
              leftColumns={columns}
              rightColumns={columns}
            />
          </Form.Item>
        </Form>
      </div>
    </CommonDrawer>
  );
};

export default Suggest;
